// 该文件专门用于创建整个应用的路由器
import Vue from "vue";
import VueRouter from "vue-router";
import About from "../pages/About";
import Home from "../pages/Home";
import News from "../pages/News";
import Message from "../pages/Message";
import Detail from "../pages/Detail";

Vue.use(VueRouter);

// 创建并暴露一个路由器
export default new VueRouter({
  routes: [
    {
      name: "about",
      path: "/about",
      component: About,
    },
    {
      path: "/home",
      component: Home,
      children: [
        {
          path: "news",
          component: News,
        },
        {
          path: "message",
          component: Message,
          children: [
            {
              name: "detail",
              path: "detail",
              // path: 'detail/:id/:title',
              component: Detail,
              // props 的第一种写法。值为对象，
              /* props: {
                a: 1,
                b: "hello",
              }, */

              // props 的第二种写法。值为布尔值，
              // props: true,

              // props 的第三种写法。值为函数，
              /* props($route) {
                return {
                  id: $route.query.id,
                  title: $route.query.title,
                };
              }, */
              props({ query: { id, title } }) {
                return {
                  id,
                  title,
                  a: 1,
                  b: "hello",
                };
              },
            },
          ],
        },
      ],
    },
  ],
});
